<route lang="json5">
{
  style: {
    navigationBarTitleText: 'dota',
    // #ifdef MP-ALIPAY
    enablePullDownRefresh: false,
    'mp-alipay': {
      allowsBounceVertical: 'NO',
      transparentTitle: 'always',
      titlePenetrate: 'YES',
      defaultTitle: '',
    },
    // #endif
  },
}
</route>
<template>
  <view class="container">
    <text>合成：</text>
    <view
      style="
        align-items: center;
        width: 100%;
        height: 200rpx;
        margin: 20rpx 0;
        line-height: 200rpx;
        text-align: center;
      "
    >
      <image style="width: 200rpx; height: 200rpx" :src="curEquip?.avatar" mode="scaleToFill" />
    </view>
    <view class="selected">
      <view class="book" v-for="(equip, index) in selectedRef" :key="index" @click="remove(equip)">
        <image :src="equip.avatar" class="book-cover"></image>
        <text class="book-title">{{ equip.name }}</text>
      </view>
    </view>
    <view class="type-box">
      <view
        style="text-align: center"
        v-for="(item, index) in storeListRef"
        :key="item"
        @tap="clickType(index)"
      >
        <text>{{ item }}</text>
      </view>
    </view>
    <uni-transition
      ref="cursor"
      custom-class="custom-transition"
      :show="true"
      mode-class="slide-left"
    />
    <swiper class="swiper" :current="activeIndex" @change="changeSwiper">
      <swiper-item class="swiper-item" v-for="(store, index) in storeListRef" :key="index">
        <scroll-view
          :scroll-top="scrollTop"
          :scroll-y="true"
          class="scroll-Y"
          refresher-enabled
          :refresher-triggered="isTriggered"
          @refresherrefresh="upper"
          @scrolltolower="lower"
        ></scroll-view>
      </swiper-item>
    </swiper>
    <view class="equip-list">
      <view class="book" v-for="(equip, index) in equipListRef" :key="index" @click="select(equip)">
        <image :src="equip.avatar" class="book-cover"></image>
        <text class="book-title">{{ equip.name }}</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { dishListApi } from '@/service/dish'
import { DotaEquip } from '@/types/dota'
import { list, randomOne, storeList, getHighEquipList } from '@/service/dota'

const activeIndex = ref(0)
const scrollTop = ref(0)
const equipListRef = ref<DotaEquip[]>([])
const curEquip = ref<DotaEquip>()
const cursor = ref()
const storeListRef = ref<string[]>([])
const selectedRef = ref<DotaEquip[]>([])
const highEquipListRef = ref<DotaEquip[]>([])

/**
 * 选择
 * @param equip
 */
const select = (equip: DotaEquip) => {
  selectedRef.value.push(equip)
  // 对比 selectedRef， highEquipListRef 是否完全相同
  for (const highEquip of highEquipListRef.value) {
    console.log('highEquip', highEquip)
    if (compareSame(highEquip, selectedRef.value) === true) {
      const idsStr = highEquip.constituteIds
      const idsArr = JSON.parse(idsStr)
      // 删除 idsArr 对应小件装备
      for (const id of idsArr) {
        const index = selectedRef.value.map((item) => item.id).indexOf(id)
        console.log('index', index)
        selectedRef.value.splice(index, 1)
      }
      console.log('selectedRef.value', selectedRef.value)
      // 新增合成的大件装备
      selectedRef.value.push(highEquip)
      checkSuccess()
    }
  }
}

/**
 * 检查是否完成
 */
const checkSuccess = async () => {
  if (selectedRef.value.length === 1 && curEquip.value.id === selectedRef.value[0].id) {
    uni.showToast({
      title: '成功合成',
      icon: 'success',
      mask: true,
      duration: 1500,
    })
    setTimeout(async () => {
      // get one equip
      selectedRef.value = []
      const equipRes = await randomOne()
      curEquip.value = equipRes.data
    }, 1500)
  }
}

const compareSame = (highEquip: DotaEquip, selectedList: DotaEquip[]) => {
  // select中 是否包含 能合成的小件
  let flag = true
  const idsArr = JSON.parse(highEquip.constituteIds)
  for (const constituteId of idsArr) {
    if (!selectedList.map((item) => item.id).includes(constituteId)) {
      flag = false
    }
  }
  console.log('flag', flag)
  return flag
}

/**
 * 移除
 * @param equip
 */
const remove = async (equip: DotaEquip) => {
  for (let i = selectedRef.value.length - 1; i >= 0; i--) {
    if (equip.id === selectedRef.value[i].id) {
      selectedRef.value.splice(i, 1)
      break
    }
  }
  checkSuccess()
}

onLoad(async () => {
  // storeList
  const storeListRes = await storeList()
  console.log('storeListRes', storeListRes)
  storeListRef.value = storeListRes.data
  // get one equip
  const equipRes = await randomOne()
  console.log(equipRes.data)
  curEquip.value = equipRes.data
  const storeName = ''
  // init equip list
  const equipListRes = await list({ storeName: '基础商店' })
  console.log(equipListRes.data)
  equipListRef.value = equipListRes.data
  // 初始化 高级装备列表
  const highEquipListFes = await getHighEquipList()
  console.log(highEquipListFes.data)
  highEquipListRef.value = highEquipListFes.data
})

// 触发下拉刷新
const upper = async () => {
  console.log('下拉刷新')
  isTriggered.value = true
  // 加载数据 api 要加 await
  // ...
  const bookListRes = await dishListApi({ page: 1, size: 10 })
  equipListRef.value = bookListRes.data.records
  setInterval(() => {
    isTriggered.value = false
  }, 1000)
}
const isTriggered = ref(false)

const lower = () => {
  console.log('lower')
  // guessRef.value?.getMore()
}

const clickType = async (index: number) => {
  if (activeIndex.value === index) return
  activeIndex.value = index
  cursor.value.step(
    {
      translateX: activeIndex.value * index,
    },
    {
      delay: 0,
      duration: 200,
      timingFunction: 'linear',
      needLayout: false,
      transformOrigin: '',
    },
  )
  cursor.value.run()
  const listRes = await list({ storeName: storeListRef.value[index] })
  console.log('listRes.data', listRes.data)
  equipListRef.value = listRes.data
  equipListRef.value = equipListRef.value.filter((e) => e.id !== curEquip.value.id)
}

const changeSwiper = (ev) => {
  activeIndex.value = ev.detail.current
  cursor.value.step(
    {
      translateX: activeIndex.value * 163 + '%',
    },
    {
      delay: 0,
      duration: 200,
      timingFunction: 'linear',
      needLayout: false,
      transformOrigin: '',
    },
  )
  cursor.value.run()
}
</script>

<style lang="scss">
.equip-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-left: 25rpx;
}
.book {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 140rpx; /* 可根据需要调整宽度 */
  height: 190rpx; /* 可根据需要调整宽度 */
  margin: 10px;
}
.book-cover {
  width: 100%;
  height: 100%; /* 可根据需要调整高度 */
  object-fit: contain;
}
.book-title {
  margin-top: 10px;
  text-align: center;
}
.selected {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  min-height: 200rpx;
  padding-left: 25rpx;
}

.scroll-Y {
  width: 100%;
  height: calc(100vh - var(--window-top));
}

.type-box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 20rpx 0rpx;
  font-size: 33rpx;
}
/* 如果使用 scss 需要使用 /deep/  */
.custom-transition {
  position: absolute;
  width: 39rpx;
  height: 7rpx;
  margin-top: 7rpx;
  margin-left: 10rpx;
  background-color: $main-color;
}
</style>
